<template>
  <div class="content">
    <!--      零工超市-->
    <div class="recommend-position">
      <div class="block"></div>
      <div class="title">
        零工超市
      </div>
    </div>
    <div class="content-block" v-loading="listLoading">
      <div class="supermarket-item" v-for="(item,index) in superList" :key="item.id" @click="skip(item.id)">
        <div style="border-radius: 20px;background: linear-gradient(#7285F6, #5458EB);width: 100%;height: 100%;padding: 20px 0 0 20px; " :style="backList[index].back">
          <div class="title">{{ item.name }}</div>
          <img :src="item.icon" alt="">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getIndexMenuWorkTypeApi } from '@/api/supermarket.js'
import index from "vuex";
export default {
  name: "Supermarket",
  computed: {
    index() {
      return index
    }
  },
  data(){
    return{
      backList:[
        {
          back: 'background: linear-gradient(#7285F6, #5458EB);',
        },
        {
          back: 'background: linear-gradient(#FAA983, #EE8A6D);',
        },
        {
          back: 'background: linear-gradient(#5FDDC6, #11BF9F);',
        },
        {
          back: 'background: linear-gradient(#FFC956, #FEAA57);',
        },
        {
          back: 'background: linear-gradient(#8DE16D, #41D48A);',
        },
        {
          back: 'background: linear-gradient(#63BBF5, #409EE1);',
        },
        {
          back: 'background: linear-gradient(#FA8CAE, #F88D9E);',
        },
        {
          back: 'background: linear-gradient(#9481FA, #B087EB);',
        },
      ],
      superList:[],
      listLoading:false,
    }
  },
  methods:{
    skip(id){
      this.id = id
      this.$router.push({ name: 'ShortJob' ,query:{id:id}})
    },
    getIndexMenuWorkType(){
      this.listLoading = true
      getIndexMenuWorkTypeApi({type:this.id,limit:8}).then((res) => {
        this.superList = res;
      }).finally(()=>{
        this.listLoading = false
      })
    }
  },
  mounted() {
    this.getIndexMenuWorkType()
  }
}
</script>

<style lang="scss" scoped>
.content{
  .recommend-position{
    width: 800px;
    margin: 0 auto;
    height: 70px;
    background-color: #fff;
    color: #498CF3;
    padding: 0 30px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
    //padding: 0 1;
    .block{
      background-color: #498CF3;
      width: 10px;
      height: 37px;
      border-radius: 15px;
      margin-right: 15px;
    }
    .title{
      font-family: "fzhzgbjianti";
      padding-top: 3px;
      font-size: 25px;
    }
  }
  .content-block{
    display: flex;
    flex-wrap: wrap;
    width: 800px;
    margin: 30px auto;
    border-radius: 20px;
    cursor: pointer;
    .supermarket-item{
      width: calc((100% - 90px)/2);
      height: 280px;
      //background-color: red;
      border-radius: 20px;
      margin: 20px auto;
      //margin: 0 20px 20px 0;
      position: relative;

      .title{
        font-family: "fzhzgbjianti";
        font-size: 50px;
        text-shadow: 0px 3px #645f5f;
        //margin: 50px 0 0 30px;
        color: #fff;
      }
      img{
        width: 54%;
        height: 185.8px;
        position: absolute;
        right: 10px;
        //bottom: -37px;
      }
    }
  }
}
</style>
